<template>
  <div class="topup-order page page" ref="webview">
    <div class="hd-bar">
      <van-nav-bar title="充值订单确认" class="bg_transparent" left-arrow @click-left="$router.go(-1)"></van-nav-bar>
      <div class="order-pay-info">
        <div class="info">
          <span class="name">请及时付款</span>
          <span class="p">下单后请尽快完成付款</span>
        </div>
        <div class="time">
          <van-count-down :time="600000" format="mm:ss" />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="order-info">
        <div class="title">
          <span class="name">订单信息</span>
          <span class="icon-copy" v-clipboard:copy="rechargeInfo.rechargeNo" v-clipboard:success="onCopy" v-clipboard:error="onError"></span>
        </div>
        <div class="rows">
          <span>订单编号</span>
          <span>{{ rechargeInfo.rechargeNo }}</span>
        </div>
        <div class="rows">
          <span>充值金额</span>
          <span>￥{{ rechargeInfo.rechargeAmount }}</span>
        </div>
        <div class="rows">
          <span>充值时间</span>
          <span>{{ rechargeInfo.createTime | formatDate }}</span>
        </div>
      </div>
      <div class="order-info mt20" v-if="payType===4">
        <div class="title">
          <span class="name">付款信息</span>
          <span class="icon-copy" v-clipboard:copy="'所属银行:'+rechargeInfo.payeeBankName+';银行支行:'+rechargeInfo.payeeBankBranch+';银行卡号:'+rechargeInfo.payeeAccount+';姓名:'+rechargeInfo.payeeName" v-clipboard:success="onCopy" v-clipboard:error="onError"></span>
        </div>
        <div class="rows">
          <span>所属银行</span>
          <span>{{ rechargeInfo.payeeBankName }}</span>
        </div>
        <div class="rows">
          <span>银行支行</span>
          <span>{{ rechargeInfo.payeeBankBranch }}</span>
        </div>
        <div class="rows">
          <span>银行卡号</span>
          <span>{{ rechargeInfo.payeeAccount }}</span>
        </div>
        <div class="rows">
          <span>姓名</span>
          <span>{{ rechargeInfo.payeeName }}</span>
        </div>
      </div>
      <div class="order-info mt20" v-if="payType===3">
        <div class="title">
          <span class="name">付款信息</span>
          <span class="icon-copy" v-clipboard:copy="rechargeInfo.payeeAccount" v-clipboard:success="onCopy" v-clipboard:error="onError"></span>
        </div>
        <div class="rows">
          <span>姓名</span>
          <span>{{ rechargeInfo.payeeName }}</span>
        </div>
        <div class="rows">
          <span>支付宝号</span>
          <span>{{ rechargeInfo.payeeAccount }}</span>
        </div>
        <div class="rows">
          <span>收款码</span>
          <div class="code">
            <img @click="showPreview=true" :src="rechargeInfo.payeeAccountImg">
          </div>
        </div>
      </div>
      <div class="order-info mt20" v-if="payType===2">
        <div class="title">
          <span class="name">付款信息</span>
          <span class="icon-copy" v-clipboard:copy="rechargeInfo.payeeAccount" v-clipboard:success="onCopy" v-clipboard:error="onError"></span>
        </div>
        <div class="rows">
          <span>微信昵称</span>
          <span>{{ rechargeInfo.payeeName }}</span>
        </div>
        <div class="rows">
          <span>微信号</span>
          <span>{{ rechargeInfo.payeeAccount }}</span>
        </div>
        <div class="rows">
          <span>收款码</span>
          <div class="code">
            <img @click="showPreview=true" :src="rechargeInfo.payeeAccountImg">
          </div>
        </div>
      </div>
      <div class="order-info mt20">
        <div class="title">
          <span class="name">需付款</span>
          <span class="amount">￥{{ rechargeInfo.rechargeAmount }}</span>
        </div>
      </div>
      <div class="order-info mt20">
        <div class="images">
          <van-uploader class="uploader" name="transferImg" v-model="transferImgList" :after-read="afterRead" :max-count="1" />
        </div>
        <div class="loading" v-if="isLoading">
          <van-loading size="24px" color="#ffffff"></van-loading>
        </div>
        <div class="text">上传转账截图</div>
      </div>
    </div>
    <div class="submitAdd">
      <van-button color="#125DFF" round class="btn" @click="rechargeApply">确认支付</van-button>
    </div>
    <van-image-preview :class="{isApp:isApp}" v-model="showPreview" closeable :showIndex="false" :images="[rechargeInfo.payeeAccountImg]" />
  </div>
</template>
<script>
export default {
  name: 'topupOrderConfirm',
  data () {
    return {
      showPreview: false,
      disabled: false,
      isLoading: false,
      transferImg: '',
      transferImgList: [],
      rechargeInfo: {}
    };
  },
  computed: {
    payType () {
      return parseInt(this.$route.query.type);
    },
    isApp: {
      get () {
        return !!localStorage.getItem('isApp') || !!this.$route.query.isApp;
      }
    }
  },
  created () {
    this.rechargeSecond();
  },
  methods: {
    onCopy () {
      this.$toast('复制成功');
    },
    onError () {
      this.$toast('复制失败');
    },
    // 充值第二步
    rechargeSecond () {
      this.$API.user.rechargeSecond({
        amount: this.$route.query.amount,
        type: this.$route.query.type
      }).then(res => {
        if (!res.code) {
          this.rechargeInfo = res.data;
        }
      });
    },
    // 充值第三步
    rechargeApply () {
      if (!this.rechargeInfo.transferImg) {
        this.$toast('请上传转账截图');
        return;
      }
      const options = { rechargeNo: this.rechargeInfo.rechargeNo, transferImg: this.rechargeInfo.transferImg };
      this.$API.user.rechargeApply(options).then(res => {
        if (!res.code) {
          this.$toast('充值提交成功');
          this.$router.replace({ path: '/my' });
        }
      });
    },
    afterRead (data, detail) {
      var fileFormData = new FormData();
      var FiletypeName = null;
      var fileData = null;
      if (!this.isApp) {
        FiletypeName = data.content.replace(/data:image\/([^;]+).*/i, '$1');
      } else {
        fileData = 'data:image/' + detail + ';base64,' + data;
      }
      fileFormData.append('fileType', !this.isApp ? FiletypeName : detail);
      fileFormData.append('base64', !this.isApp ? data.content : fileData);
      this.$set(this, 'isLoading', true); // loading加载
      // 非APP用web上传
      if (!this.isApp) {
        this.fileUploadAccountImg(fileFormData, detail.name);
      } else {
        return fileFormData;
      }
    },
    fileUploadAccountImg (fileFormData, type) {
      this.$API.global.cardFileUpload(fileFormData).then(res => {
        console.log(res);
        if (res.code === 0) {
          var _res = res.data;
          if (!this.isApp) {
            this.transferImgList = [{ url: _res.src }];
          }
          this.$set(this.rechargeInfo, 'transferImg', _res.src);
        } else {
          this.$toast(res.message);
        }
        this.isFrontLoading = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.topup-order {
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow: auto;
  }
  .hd-bar {
    //  height: 280px;
    background: linear-gradient(90deg, #125dff 0%, #125dff 100%);
    .order-pay-info {
      display: flex;
      justify-content: space-between;
      padding: 20px 40px;
      .info {
        color: #fff;
        .name {
          font-size: 36px;
        }
        .p {
          font-size: 28px;
          font-weight: 300;
          padding: 10px 0;
          display: block;
        }
      }
      .time {
        display: flex;
        align-items: center;
        position: relative;
        margin-right: -20px;
        top: -10px;
        width: 160px;
        text-align: right;
        &::before {
          width: 38px;
          height: 38px;
          content: '';
          display: inline-block;
          margin-right: 10px;
          background-image: url('/static/images/icon-time.png');
          background-position: left center;
          background-repeat: no-repeat;
          background-size: 38px 38px;
        }
        .van-count-down {
          font-size: 34px;
          display: inline-block;
          color: #fff;
        }
      }
    }
  }
  .mt20 {
    margin-top: 20px;
  }
  .order-info {
    padding: 18px 41px;
    background-color: #fff;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 0;
      .name {
        color: #353535;
        font-size: 28px;
        font-weight: 500;
      }
      .icon-copy {
        display: inline-block;
        width: 31px;
        height: 30px;
        background-image: url('/static/images/icon-copy-active.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-left: 20px;
        vertical-align: middle;
      }
      .amount {
        font-size: 34px;
        color: #ff0000;
        vertical-align: middle;
      }
    }
    .rows {
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
      font-size: 28px;
      color: #555;
      .code {
        width: 139px;
        img {
          width: 100%;
        }
      }
      //  font-weight: 300;
    }
  }
  .submitAdd {
    padding: 30px 40px;
    color: #fff;
    font-size: 32px;
    text-align: center;
    .btn {
      width: 100%;
    }
    .van-button__text {
      color: #fff;
      font-size: 32px;
    }
  }
}
</style>
